<template>
  <div>
    <bcd-top title="会员中心" englishtitle="VIP CENTER" />
    <template v-if="!$store.getters.screenWidth">
      <div class="vip_main">
        <el-row class="tac">
          <div
            style="background:#fff;font-size:18px;line-height:2;padding:10px 0;box-sizing:border-box;"
          >会员中心</div>
          <el-col :span="12">
            <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" router>
              <el-menu-item index="/vipcenter/shopcart">
                <span style="font-size:14px;" slot="title">我的购物车</span>
              </el-menu-item>
              <el-menu-item index="/mineCenter">
                <span style="font-size:14px;" slot="title">我的订单</span>
              </el-menu-item>
              <el-menu-item index="/address">
                <span style="font-size:14px;" slot="title">收货地址</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
        <div class="vip_main">
          <router-view></router-view>
        </div>
      </div>
    </template>
    <template v-else>
      <div>

      </div>
      <el-menu
        :default-active="activeIndex"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        mode="horizontal"
        class="el-menu-vertical-demo"
        router
        style="border-right:none"
      >
        <el-menu-item index="/vipcenter/shopcart">
          <span style="font-size:14px;" slot="title">我的购物车</span>
        </el-menu-item>
        <el-menu-item index="/mineCenter">
          <span style="font-size:14px;" slot="title">我的订单</span>
        </el-menu-item>
        <el-menu-item index="/address">
          <span style="font-size:14px;" slot="title">收货地址</span>
        </el-menu-item>
      </el-menu>
      <div class="vip_main" :style="$store.getters.screenWidth ? 'padding:0' : '' ">
          <router-view></router-view>
        </div>
    </template>
  </div>
</template>
<script>
import footerPart from "./footer";
import personInfo from "./personInfo";
import { mapGetters } from "vuex";
import bcdTop from "../components/bcdTop";

export default {
  data() {
    return {
      activeIndex: null
    };
  },

  components: {
    personInfo,
    bcdTop,
    footerPart
  },
  computed: {
    ...mapGetters({
      path: "routerPath"
    })
  },
  mounted() {
    this.activeIndex = this.$route.query.path;
    console.log("this.actibe", this.activeIndex);
  }
};
</script>
<style lang="scss">
.vip_main {
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  .tac {
    width: 25%;
    position: sticky;
    top: 100px;
    height: calc(100vh - 220px);
    background-color: #fff;
    .el-col-12 {
      width: 100%;
    }
  }
  .vip_main {
    width: 72%;
    background-color: #fff;
  }
}
</style>